<!doctype html>
<html>
<head>
	<title>DataBind : Example 3</title>
	
	<link href="Styles/static.css" type="text/css" rel="Stylesheet" />
	
	<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="Scripts/jquery.databind.min.js"></script>
		
	<script type="text/javascript">
	    $(document).ready(function() {

	        var map = { name: '#txtName', age: '#txtAge', gender: '#drpGender', genders: '#drpGender' };
	        var data = { name: 'Jane Doe', age: 27, genders: [[0, 'Female'], [1, 'Male']], gender: 0 };

	        $('#form1').binddata(data, map); //Bind with a map
	    });
	    
	</script>
	
</head>
<body>

    <form id="form1" action="#">
        <label for="txtName" >Name</label><input type="text" id="txtName" /><br />
        <label for="txtAge">Age</label><input type="text" id="txtAge" /><br />
        <label for="drpGender">Gender</label><select id="drpGender"></select>
    </form>
		
</body>
</html>
